<template>
  <div class = "headerwrapper"> 
    <div class = "locationHeader">
      <span class = "iconfont icon-search"></span>
      <input type = 'text'  
      class = "location-search" 
      :class = "[shorten]"
      placeholder = "请输入城市名如：北京"
      v-model = "keyword"
      >
      <div 
      class = "cancel" 
      :class = "[cancelbutton]"
      @click = "clearbutton">取消</div>
      <div 
      class = "Xcross" 
      :class = "[Xbutton]"
      @click = "clearX"
      >X</div>
    </div>
    <div 
    class = "searchfeedback"
    v-show = "this.searchfeedbackList.length"
    :class = "[searchfeedbackshow]"
    ref="searchfeedbackwrapper"
    >
      <ul class = "content">
        <li class = "searchfeedbacktext">{{this.searchfeedbacktext}}</li>
        <li 
        class = "searchfeedbacktext"
        v-for = "item of searchfeedbackList"
        :key = "item.id"
        @click = "handleItemClick(item.name)"
        >{{item.name}}</li>
      </ul>
    </div>
      
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {disreslove} from '../../../utils/utils.js'

export default {
  name: 'locationHeader',
  props:{
    alphList:Object.Array,
  },
  data(){
    return{
      flag:'1',
      keyword:'',
      shorten:'',
      cancelbutton:'',
      Xbutton:'',
      searchfeedbacktext:'请输入城市名 如北京',
      searchfeedbackshow:'',
      searchfeedbackList:[],
      iletter:'',
      iWord:'',
    }
  },
  mounted(){
      const scroll = new BScroll(this.$refs.searchfeedbackwrapper, {
          click:true,
          mouseWheel:{
              speed:20,
              invert:false,
              easeTime:300
          }
      })
  },
  methods:{
    
    handleItemClick(city){
        this.$store.dispatch('change',city)
        this.$router.push('/')
      
    },
    showClass:function(){
      this.shorten = "shorten"
      this.cancelbutton = "cancelbutton"
      this.Xbutton = "Xbutton"
      
    },
    removeClass:function(){
      this.shorten = " "
      this.cancelbutton = " "
      this.Xbutton = " "
    },
    removeBack:function(){
      
      this.removeClass()
      this.searchfeedbackList = []
      this.searchfeedbacktext = ""
    },
    clearbutton:function(){
      this.keyword = ' '
      this.flag = '2'
      
    },
    clearX:function(){
      this.keyword = ' '
      this.flag = '3'
    },
    showError:function(){
      this.searchfeedbackList = ['']
      this.searchfeedbacktext = '找不到'+this.keyword
    },
    LoopAlphabet:function(LowerContent){
      
      for(let i in this.alphList){
          
          if(i.toLowerCase().indexOf(LowerContent.substr(0,1))>-1){
            
            let arr = []
            this.alphList[i].forEach((value)=>{
              
              arr.push(value.spell.substr(LowerContent.length-1,1))
              let a = [...new Set(arr)]
              this.iletter = a.toString()
          })
        }
      }
    },
    searchAlph:function(content){
       const LowerContent = content.toLowerCase()
        let result = []
        for(let i in this.alphList){
          let haveAlph = i.toLowerCase().indexOf(LowerContent.substr(0,1))>-1
          if(haveAlph){
            
            this.alphList[i].forEach((value)=>{
              
              if(value.spell.indexOf(LowerContent)>-1){
                result.push(value)
                this.searchfeedbackList = result
                this.searchfeedbacktext = this.keyword
              }else if(LowerContent.indexOf(value.spell)>-1){
                this.searchfeedbacktext = '找不到'+this.keyword
              }else{
                
                this.LoopAlphabet(LowerContent)
	              let haveErrorLetter=!(this.iletter.indexOf(LowerContent.substr(LowerContent.length-1,1))>-1)
                if(haveErrorLetter){
                  this.searchfeedbacktext = '找不到'+this.keyword
                  this.iletter = ''
                }
              }
            })
          }else if(LowerContent.substr(0,1)==='u'||
          LowerContent.substr(0,1)==='i'||
          LowerContent.substr(0,1)==='v'||
          LowerContent.substr(0,1)==='o'){
            this.searchfeedbackList = ['']
            this.searchfeedbacktext = '找不到'+this.keyword
            
          }
        }
    },
    LoopWord:function(content){
      
      for(let i in this.alphList){
          
          if(i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
            
            let arr = []
            this.alphList[i].forEach((value)=>{
              
              arr.push(value.name.substr(content.length-1,1))
              let a = [...new Set(arr)]
              this.iWord = a.toString()
          })
        }
      }
    },
    searchWord:function(content){
        let result = []
        for(let i in this.alphList){
          let haveAlph = i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1
          if(haveAlph){
            
            this.alphList[i].forEach((value)=>{
              
              if(value.name.indexOf(content)>-1){
                result.push(value)
                this.searchfeedbackList = result
                this.searchfeedbacktext = this.keyword
              }else if(content.indexOf(value.name)>-1){
                this.searchfeedbacktext = '找不到'+this.keyword
              }else{
                
                this.LoopWord(content)
	              let haveErrorWord=!(this.iWord.indexOf(content.substr(content.length-1,1))>-1)
                if(haveErrorWord){
                  this.searchfeedbacktext = '找不到'+this.keyword
                  this.iWord= ''
                }
              }
            })
          }
        }
    }
   
  },
  watch:{
    keyword(){
        let content = this.keyword.trim()
        this.showClass()
      if(content === ''){
        //内容为空
        //flag=1表示输入内容为空或逐步删除至空
        //flag=2表示点击取消按钮
        //flag=其他 表示点击X按钮
        if(this.flag === '1'){
          this.removeBack()
        }else if(this.flag === '2'){
          this.keyword = ''
          this.removeBack() 
        }else{
          this.keyword = ''
        }
      }else if(/^[0-9]+$/.test(content)){
        //内容为数字
        this.showError()
      }else if(/^[a-zA-Z]+$/.test(content)){
        //内容为字母
       this.searchAlph(content)
      }else if(/^[\u4e00-\u9fa5]+$/.test(content)){
        //内容为汉字
        this.searchWord(content)
      }else{
        //内容为其他
        this.showError()
      }
    }
  }
}

</script>

<style lang = 'stylus' scoped>
.locationHeader
    position:relative
    padding:.1rem
    height:1.12rem
    background:#e0e4ec
    .iconfont
        position:absolute
        left:.3rem
        top:.3rem
        color:#ccc
        font-size:15px
    
    .cancel
      display:none
    .cancelbutton
      display:block
      position:fixed
      top:.3rem
      right:.2rem
    .Xcross
      display:none
    .Xbutton
      display:block
      position:fixed
      top:.3rem
      right:1.2rem  
      background:#e0e4ec
    .location-search
        height:.7rem
        border-radius:.1rem
        box-sizing:border-box
        line-height:.7rem
        width:100%
        text-align:left
        padding-left:.6rem
    .shorten
      width:87%
.searchfeedback
    width:100%
    position:absolute
    top:1rem
    bottom:0rem
    z-index:100
    overflow:hidden
    .content
      width:100%
      height:30rem
      overflow:hidden
      .searchfeedbacktext
        width:100%
        background:#fff
        height:.7rem
        line-height:.7rem
        text-align:left
        padding-left:.5rem
        border-bottom:1px solid #e0e4ec
      


    
    

</style>